<template>
    <view class="container">
        <image class="classic-img" :src="book.image" mode=""></image>
        <image
            class="player-img"
            :tap="onPlay"
            :src="!playing ? playSrc : pauseSrc"
            mode=""
        ></image>
        <image class="tag" src="../../../static/music.png" mode=""></image>
        <text class="content">{{ content }}</text>
    </view>
</template>

<script>
// import {classicBeh} from '../classic-beh.js';
export default {
    // behaviors:[classicBeh],
    props: {
        img: String,
        content: String,
        type: Boolean
    },
    data () {
        return {
            // 默认当前音乐不播放
            playing: false,
            pauseSrc: '../../../static/player.png',
            playSrc: '../../../static/player@pause.png',

        }
    },
    methods: {
        onPlay () {
            // 切换图片
			this.setData({
				playing: true
			})
        }
    }
}
</script>

<style lang='scss' scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.classic-img {
    width: 422rpx;
    height: 422rpx;
    margin-top: 60rpx;
    border-radius: 50%;
}

.player-img {
    width: 120rpx;
    height: 120rpx;
    position: relative;
    bottom: 270rpx;
}

.tag {
    width: 44rpx;
    height: 128rpx;
    position: relative;
    bottom: 160rpx;
    right: 310rpx;
}
</style>
